
<!--库存查询-->
<template>
    <div class="page-box">
        <div class="page-search">
            <div>
                <label>仓库</label>
                <el-select v-model="searchForm.WarehouseId" placeholder="请选择仓库" style="width: 160px;">
                    <el-option v-for="item in WarehouseList" :key="item.Id" :label="item.WarehouseName" :value="item.Id"></el-option>
                </el-select>
            </div>
            <div>
                <label>物料类型</label>
                <el-select v-model="searchForm.ItemTypeId" placeholder="请选择物料类型" style="width: 160px;">
                    <el-option v-for="item in ItemTypeList" :key="item.Id" :label="item.ItemTypeName" :value="item.Id"></el-option>
                </el-select>
            </div>
            <div>
                <label>商品名称</label>
                <el-input v-model="searchForm.ItemName" style="width: 160px;" placeholder="请输入商品名称"></el-input>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="page-section">


            <!--表单-->
            <el-table :data="tableData"  ref="dataForm"   v-loading="isLoading"  height="calc(105vh - 350px)" >
                <el-table-column  type="selection" width="55"></el-table-column>
                <el-table-column  prop="WarehouseName" label="所属仓库" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="ItemCode" label="商品编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="ItemName" label="商品名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="ItemTypeName" label="类别" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="PurchasePrice" label="进价" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="SalePrice" label="售价" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="StockCount" label="入库数量" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="SalesCount" label="出库数量" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="CurrCount" label="库存数量" :show-overflow-tooltip="true"></el-table-column>



                <el-table-column   label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="details(scope.row)">明细</el-button>
                    </template>
                </el-table-column>
            </el-table>
    

            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount"/>
        </div>


        <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
            width="60%" @close="closeDialog">
            <ItemStockDetails :model="model" v-if="dialogDomain.dialogVisible" />
            
        </el-dialog>

   </div>


</template>

<script>

import ItemStockDetails from './components/ItemStockDetails.vue';
import Pagination from '@/components/Pagination.vue';
export default {
    components:{
        Pagination,
        ItemStockDetails
    },
    mounted(){
        this.dataBind();
        this.getWarehouseData();
        this.getItemTypeData();
    },
    data(){
        return{

            //搜索字段
            searchForm:{
                WarehouseId:'',
                ItemTypeId:'',
                ItemName:'',
            },
           

            //对话框对象
            dialogDomain:{
                title:'明细',
                dialogVisible:false,
            },

            //数据模型
            model:{
                WarehouseId:'',
                WarehouseName:'',
                ItemId:'',
                ItemCode:'',
                ItemName:'',
                Spec:'',
                UnitOfMeasure:'',
                ItemTypeId:'',
                ItemTypeName:'',
                PurchasePrice:'',
                SalePrice:'',
                StockCount:'',
                SalesCount:'',
                CurrCount:'',
                
            },


            pageDomain:{
                PageIndex:1,
                PageSize:10,
                TotalCount:0
            },
            //表单数据
            tableData:[],

            
            //仓库数据
            WarehouseList: [],

            
            //商品类别数据
            ItemTypeList: [],



            isLoading:false


        }
    },
    methods:{
       
        //明细
        details(model){
            this.dialogDomain.title = "货品库存明细"+"【"+model.WarehouseName+"】";
            this.dialogDomain.dialogVisible = true;
            this.model = model;
        },

        

        //对话框关闭事件
        closeDialog(){
            this.model={
                WarehouseId:'',
                WarehouseName:'',
                ItemId:'',
                ItemCode:'',
                ItemName:'',
                Spec:'',
                UnitOfMeasure:'',
                ItemTypeId:'',
                ItemTypeName:'',
                PurchasePrice:'',
                SalePrice:'',
                StockCount:'',
                SalesCount:'',
                CurrCount:'',
            }
        },


        //查询
        search(){
            this.pageDomain.PageIndex=1;
            this.dataBind();
        },
        //重置查询输入框
        reset(){
            this.searchForm.WarehouseId='';
            this.searchForm.ItemTypeId='';
            this.searchForm.ItemName='';
        },

        
        //分页方法
        handleSizeChange(val){
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val){
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },


        

        //获取数据
        dataBind(){
            console.log(this.searchForm.ItemTypeId);
            this.isLoading=true;
            this.$http.get('/api/ItemStock',
            {
               params:{
                    PageIndex:this.pageDomain.PageIndex,
                    PageSize:this.pageDomain.PageSize,
                    WarehouseId:this.searchForm.WarehouseId,
                    ItemTypeId:this.searchForm.ItemTypeId,
                    ItemName:this.searchForm.ItemName,
               }
            })
            .then(res=>{
                this.tableData=res.Data;
                this.pageDomain.TotalCount = res.Count;
                this.isLoading=false;
            })
        },
        //获取仓库数据
        getWarehouseData() {
            this.$http.get('/api/Warehouse/GetAll')
                .then(res => {
                    this.WarehouseList=res.Data;
                })
        },

        //获取物料类型数据
        getItemTypeData() {
            this.$http.get('/api/ItemType/GetAll')
                .then(res => {
                    this.ItemTypeList=res.Data;
                })
        },
    }

}
</script>

<style>

 </style>